<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="textactive">{{title}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row>
        <el-col :span="14">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            @current-change="handleCurrentChange">
            <el-table-column label="开关">
              <template slot-scope="props">
                <el-switch
                  v-model="props.row.open"
                  active-color="#13ce66"
                  inactive-color="#999999"
                  @change="switchChange(props.row)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="滚动字幕" prop="caption"></el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="props">
                <el-button  @click="handleClick(props.row)" type="primary" size="small">
                  <i class="el-icon-edit-outline" style="font-size: 14px;"></i>
                </el-button>
                <el-button @click="handleDeleteClick(props.row)" type="danger" size="small">
                    <i class="el-icon-delete" style="font-size: 14px;"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-input
            type="textarea"
            :rows="4"
            resize="none"
            placeholder="请输入滚动字幕"
            v-model.trim="textarea">
          </el-input>
          <el-col>
            <div style="color:#F56C6C;font-size: 12px;margin-top: 5px;" v-if="error">滚动字幕长度不得超过20个字!</div>
            <div style="color:#F56C6C;font-size: 12px;margin-top: 5px;" v-if="error1">滚动字幕填写内容不得为空!</div>
          </el-col>
          <el-button class="button" @click="postMarquee" type="primary" size="medium">保存</el-button>
          <el-button class="button1" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </div>


    <el-dialog
      title="删除滚动字幕"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该滚动字幕吗？</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="deletesend">确 定</el-button>
    <el-button round @click="deleteClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
  export default {
    name: "marquee",
    data(){
      return {
        title:"",
        tableData:[],
        textarea:"",
        currentPage: 1,
        pagesize: 15,
        currentRow: null,
        totalcount: 0,
        rowId:null,
        dera:null,
        dialogVisible : false,
        id : '',
        error : false,
        error1 : false
      }
    },
    created(){
      this.title = this.$route.meta.title;
      this.success();
    },
    methods:{
      //获取所有的字幕数据
      success(){
        axios.get(this.url + "/caption/selAllCaption")
        .then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            for(let i = 0,len = res.data.data.length; i < len; i++){
              if(res.data.data[i].derail == "Y"){
                res.data.data[i].open = true
              } else {
                res.data.data[i].open = false
              }
            }
            this.tableData = res.data.data;
            this.totalcount = this.tableData.length;
            if(this.currentPage > Math.ceil(this.totalcount/this.pagesize)){
              this.currentPage = Math.ceil(this.totalcount/this.pagesize);
            }
          }
        })
      },
      //获取当前高亮行的数据
      handleCurrentChange(val){
        this.currentRow = val;
      },
      handleSizeChange(val) {
      this.pagesize = val;
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
      },
      //编辑滚动字幕
      handleClick(row){
        this.textarea = row.caption
        this.rowId = row.id
        this.dera = row.open
      },
      //提交滚动字幕
      postMarquee(){
        if(this.rowId){
          let der = "";
          if(this.dera){
            der = "Y"
          }else {
            der = "N"
          }
          if(this.textarea.length > 20){
            this.error = true
          }else {
            this.error = false;
            axios.post(this.url + "/caption/updCaption",qs.stringify({
              derail:der,
              id:this.rowId,
              caption:this.textarea
            })).then(res =>{
              this.unlogin(res.data.code)
              if(res.data.code == 200){
                this.rowId = null;
                this.textarea = "";
                this.dera = null;
                this.success();
                this.$bus.$emit("headerGetMarquee");
                this.$refs.singleTable.setCurrentRow();
              }
            })
          }

        }else{
          if(this.textarea.length == 0){
            this.error1 = true;
          }else  if(this.textarea.length > 20){
            this.error1 = false;
            this.error = true;
          }else if(this.textarea.length <= 20 && this.textarea.length > 0){
            this.error1 = false;
            this.error = false;
            axios.post(this.url + "/caption/addCaption",qs.stringify({
              caption:this.textarea
            })).then(res =>{
              if(res.data.code = 200){
                this.success();
                this.textarea = "";
                this.$bus.$emit("headerGetMarquee")
              }
            })
          }
        }
      },
      cancel(){
        this.textarea = "";
        this.error = false;
        this.error1 = false;
        this.$refs.singleTable.setCurrentRow();
      },
      // 开关按钮发生改变的时候触发的方法
      switchChange(row){
        let der = "";
        if(row.open){
          der = "Y"
        }else {
          der = "N"
        }
        axios.post(this.url + "/caption/upCaption",qs.stringify({
          derail:der,
          id:row.id
        })).then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            this.success();
            this.$bus.$emit("headerGetMarquee")
          }
        })
      },
      handleDeleteClick(row){
        this.id = row.id;
        this.dialogVisible = true;
        document.documentElement.style.overflow='hidden';
      },
      //发送删除请求
      deletesend(){
        this.dialogVisible = false;
        axios.post(this.url + "/caption/delCaption",qs.stringify({
          id:this.id
        })).then(res=>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            this.success();
            this.dialogVisible = false;
            document.documentElement.style.overflow='auto';
            this.textarea = '';
            this.$bus.$emit("headerGetMarquee")
          }
        })
      },
      //关闭删除弹出框
      deleteClose(){
        this.dialogVisible = false;
        this.textarea = '';
        document.documentElement.style.overflow='auto';
      },
    },
  }
</script>

<style scoped>
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.textactive {
  color: #1099ff;
}
.posttable {
  min-height: 700px;
  background-color: #fff;
  padding-top:20px;
  padding-left:10px;
}
.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}
.button{
  width:144px;
  height:36px;
  margin-top:20px;
  margin-right:30px;
}
.button1{
  width:144px;
  height:38px;
  margin-top:20px;
  margin-right:30px;
}
</style>
